<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                    type="warning"
                    plain
                    icon="el-icon-upload2"
                    size="mini"
                    @click="handleImport"
                    >导入</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    >新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    >修改</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    >删除</el-button>
                </el-col>
                <right-toolbar :search="false" @queryTable="handleList"></right-toolbar>
            </el-row>
        </div>
        
        <el-table v-loading="loading" :data="tableData"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true"/>
            <el-table-column label="性别" align="center" prop="gender" width="80"></el-table-column>
            <el-table-column label="联系方式" align="center" prop="bindPhone" ></el-table-column>
            <el-table-column label="更新时间" align="center" prop="createTime" >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit"
                        @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete"
                        @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新建班级对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="480px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name" placeholder="输入姓名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="性别" prop="gender">
                            <el-select 
                                style="width: 100%" 
                                v-model="form.gender" 
                                placeholder="选择年级" 
                                clearable>
                                <el-option
                                    v-for="dict in dict.type.sys_user_sex"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.label"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="手机号" prop="bindPhone">
                            <el-input v-model="form.bindPhone" placeholder="输入手机号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="生日" prop="birth">
                            <el-date-picker style="width: 100%"
                                v-model="form.birth"
                                value-format="yyyy-MM-dd 00:00:00"
                                type="month"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>

<script>
import { listPageStudent, addStudent,delStudentById } from "@/api/student/student.js"
export default {
    dicts: ['sys_user_sex'],
    data() {
        return {
            // 遮罩层
            loading: false,
            tableData: [],
            total: undefined,
            classObj: {},
            ids: [],
            single: true,
            multiple: true,
            //新增学生
            open: false,
            form: {},
            title: '',
            //查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                classId: undefined
            },
            rules: {
                name: [
                    { required: true, message: "姓名不能为空", trigger: "change" }
                ],
                gender: [
                    { required: true, message: "性别不能为空", trigger: "change" }
                ],
                bindPhone: [
                    { required: true, message: "手机号不能为空", trigger: "change" }
                ]
            }
        }
    },
    methods: {
        handleInit(obj) {
            this.classObj = obj
            this.handleList()
        },
        handleList() {
            this.loading = true
            this.queryParams.classId = this.classObj.value
            // console.log(this.queryParams)
            listPageStudent(this.queryParams).then(res => {
                console.log(res)
                this.total = res.data.total
                this.tableData = res.data.records
                this.loading = false
            })
        },
        submitForm() {
            this.$refs["form"].validate(valid => {
            if (valid) {
                this.form.classId = this.classObj.value
                addStudent(this.form).then(response => {
                    this.$modal.msgSuccess("成功");
                    this.open = false;
                    this.handleList();
                });
            }
        });
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.noticeId)
            this.single = selection.length!=1
            this.multiple = !selection.length
        },
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "新增学生";
        },
        /**修改学生信息 */
        handleUpdate(studentObj) {
            this.reset();
            this.open = true;
            this.title = "编辑学生";
            this.form = Object.assign({}, this.form, studentObj)
        },
        /**删除学生 */
        handleDelete(studentObj) {
            delStudentById({ id: studentObj.id }).then(res => {
                this.$modal.msgSuccess("删除成功");
                this.handleList();
            })
        },
        reset() {
            this.form = {
                id: undefined,
                name: '',
                classId: undefined,
                birth: undefined,
                gender: undefined,
                bindPhone: ''
            };
            this.resetForm("form");
        },
        /**导入学生列表 */
        handleImport() {

        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .table-header{
        display: flex;
        justify-content: space-between;
    }
</style>